<template>
  <div class="allbox">
    <h4 class="boardName" @click="gotoThat">
      设备数量
      <a-icon type="right" />
    </h4>
    <ul class="quantityOFGacility lightBox">
      <li>
        <h5>{{ StateCountData.all || 0 }}</h5>
        <p>全部</p>
      </li>
      <li>
        <h5 :style="{ color: alarmStatues[0] }">{{ StateCountData.running || 0 }}</h5>
        <p>运行</p>
        <a :style="{ 'background-color': alarmStatues[0] }"></a>
      </li>
      <li>
        <h5 :style="{ color: alarmStatues[1] }">{{ StateCountData.stop || 0 }}</h5>
        <p>待机</p>
        <a :style="{ 'background-color': alarmStatues[1] }"></a>
      </li>
      <li>
        <h5 :style="{ color: alarmStatues[2] }">{{ StateCountData.alarm || 0 }}</h5>
        <p>报警</p>
        <a :style="{ 'background-color': alarmStatues[2] }"></a>
      </li>
      <li>
        <h5 :style="{ color: alarmStatues[3] }">{{ StateCountData.offline || 0 }}</h5>
        <p>离线</p>
        <a :style="{ 'background-color': alarmStatues[3] }"></a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    StateCountData: {
      type: Object,
      default: () => {},
    },
    alarmStatues: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    gotoThat() {
      this.$store.commit('board/HeadNavType', 2);
      localStorage.setItem('navType', 2);
      this.$router.push('/equipmentList');
    },
  },
};
</script>

<style lang="less" scoped>
@import url('../../light.less');
@import url('../../style.less');
</style>